import React, { useRef } from "react"

import { useAppContext } from "../context"

export default function D() {
  const {context, setContext} = useAppContext()
  const nameRef = useRef<HTMLInputElement>(null)
  const ageRef = useRef<HTMLInputElement>(null)

  const update=()=>{
    setContext({user: {name:nameRef.current?.value, age:ageRef.current?.value}})
  }

  return (
    <div className="D">
      <p>D组件,接收到数据:<br/>
        <span>{context?.user?.name}-{context?.user?.age}</span>
      </p>
      <p>
        <input ref={nameRef} type="text" placeholder='请输入姓名'/>
        <input ref={ageRef} type="number" placeholder='请输入年龄'/>
        <button onClick={update}>update</button>
      </p>
    </div>
  )
}
